<template>
    <fieldset class="addfathercom">
    <form action="" @submit.prevent="add()">
      <h1>用户信息</h1>
      <p>用户名：<input type="text" placeholder="请输入用户名" v-model.lazy.trim="uname"></p>
      <p>性别:
        <input type="radio" value="0" v-model="gender"/><span>女</span>
        <input type="radio" value="1" v-model="gender" /><span>男</span>
    </p>
    <p>身份：
        <select name="" id="" required v-model.number="shenfen">
            <option value="" disabled>--请选择身份--</option>
            <option value="1">组长</option>
            <option value="2">组员</option>
        </select>
    </p>
    <input type="submit" value="提交">
    </form>
      <AddSonCom :sonmsg='msg'/>
    </fieldset>
  </template>
<script setup>
import { reactive,ref } from 'vue';
import AddSonCom from './AddSonCom.vue';
let msg = reactive({
    uname:'',
    gender : '',
    shenfen:'',
});
let uname = ref('');
let gender = ref('');
let shenfen = ref('');
let add =()=>{
    msg.uname = uname.value;
    msg.gender = gender.value;
    msg.shenfen = shenfen.value;
    console.log(msg);
    
}

</script>
<style scoped>

</style>